import React, { useState } from 'react'
import { Form, Input, Select, DatePicker, Space, Button } from 'antd';
import { SearchOutlined, SyncOutlined,PlusOutlined } from '@ant-design/icons';
import Add from './component/Add'
import "./usergurisdiction.less"
import TabList from './component/tabList'
const { Option } = Select;
const { RangePicker } = DatePicker;

export default function Usergurisdiction() {
  const [startTime, setStartime] = useState('')
  const [entTime, setEntTime] = useState('')
  const [form] = Form.useForm();
  const [isModalVisible, setIsModalVisible] = useState(false);
  // 搜索
  const onFinish = (values) => {
    const { gurisdictionname='', gurisdictionCharacter='', type='' } = values
    // console.log("value", values);
    const params = {
      gurisdictionname,
      gurisdictionCharacter,
      type,
      startTime,
      entTime,
    }
    console.log("params", params);
  };
  // 创建时间
  const onUpdataTime = (date, dateString) => {
    console.log("date", date, dateString);
    setStartime(
      dateString[0]
    )
    setEntTime(dateString[1])

  }
  // 重置
  const reset=()=>{
    form.resetFields()
  }
  // 拿到新增回来的值
  const add =(params)=>{
    console.log("params",params);
    debugger
  }
  // 父子传值
  const userProps={
    addSetIsModalVisible:add

  }
  return (
    <div>
      <Form
        className='form'
        name="basic"
        autoComplete="off"
        onFinish={onFinish}
        style={{margin:20,marginTop:20}}
        form={form}
      >
        <Form.Item
          label="用户名称"
          name="gurisdictionname"
          style={{
            marginRight: 20
          }}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="权限字符"
          name="gurisdictionCharacter"
          style={{
            marginRight: 20
          }}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="状态"
          name='type'
          style={{
            marginRight: 20
          }}>
          <Select
            style={{
              width: 220,
            }}
          >
            <Option value="0">正常</Option>
            <Option value="1">停用</Option>
          </Select>
        </Form.Item>
        <Form.Item
          label="创建时间"
          name="updataTime"
          style={{
            marginRight: 20
          }}
        >
          <Space direction="vertical" size={12}>
            <RangePicker onChange={onUpdataTime} />
          </Space>
        </Form.Item>
        <Form.Item style={{
          marginRight: 20
        }}>
          <Button htmlType="submit" type="primary" icon={<SearchOutlined />}>
            搜索
          </Button>
        </Form.Item>
        <Form.Item style={{
          marginRight: 20
        }}>

          <Button onClick={reset} icon={<SyncOutlined />}>
            重置
          </Button>
        </Form.Item>
      </Form>
      <div style={{marginLeft:20,marginTop:-20}}>
      <Button type="primary" icon={<PlusOutlined />} onClick={(()=>{ setIsModalVisible(true)})}>
      新增
    </Button>
    {isModalVisible? <Add  {...userProps} />:<></>}
 
   
      </div>
      <TabList />
    </div>
  )
}
console.log();
